<template>
  <section class="term">
    <alert-table  v-if="alertTable" :alertTable="alertTable"/>
    <input class="search" v-model="searchData"  type="search" placeholder="请输入想查找的内容"/>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>时间</th>
          <th>版本</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="list of filterBy(tableData, searchData)" :key="list.id">
          <td>{{list.name}}</td>
          <td>{{list.phone}}</td>
          <td>{{list.time}}</td>
          <td>{{list.product}}</td>
          <td class="tel" @click="deleteTable(list.id)">删除</td>
        </tr>
      </tbody>
    </table>
  </section>
</template>

<script>
import AlertTable from '../../../common/AlertTable'
import { mapState } from 'vuex'
export default {
  name: 'Term',
  components: {
    AlertTable
  },
  data () {
    return {
      termTableItem: [],
      alertTable: '',
      alert: '',
      searchData: ''
    }
  },
  computed: {
    ...mapState(['tableData'])
  },
  updated () { // 实时更新数据
    this.$nextTick(() => {
      this.getTermTable()
    })
  },
  created () {
    this.getTermTable()
    if (this.$route.query.alert) {
      this.alertTable = this.$route.query.alert
      let that = this
      setTimeout(() => {
        that.alertTable = ''
      }, 2000)
    }
  },
  methods: {
    getTermTable () {
      this.axios.get('/consultTermTable')
        .then((res) => {
          console.log(res)
          let data = res.data
          let table = []
          for (let i in data) {
            table.push(data[i])
            console.log(table)
          }
          // this.termTableItem = data
          this.$store.commit('getTableData', table)
        })
    },
    deleteTable (id) { // 删除 改变数据put
      // let data = this.termTableItem[id]// vuex操作删除数据
      // this.$store.commit('deleteData', data)
      this.axios.delete('/consultTermTable' + '/' + id)
        .then(() => {
          this.$router.push({ path: '/consult/term', query: { alert: '数据删除成功！' } })
          this.alertTable = this.$route.query.alert
          let that = this
          setTimeout(() => {
            that.alertTable = ''
          }, 2000)
        })
    },
    filterBy (tableData, searchData) { // 搜索
      return tableData.filter((term) => { // match查找对应数据 filter 过滤  这一层的return表示未搜索时候的显示的数据
        return (term.name.match(searchData)) || (term.phone.match(searchData)) // 这个return是返回搜索后所匹配的数据
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .search
    width 95%
    padding 20px
    margin 20px
    box-sizing border-box
    border 1px solid #ccc
    color #555
    font-size: 30px
  .term
    position relative
    width 100%
    height 100vh
    background #fff
    table
      width 100%
      thead
        tr
          th
            border-bottom 1px solid #ccc
            padding 20px 0
            font-size 31px
            text-align center
            color #333333
            font-weight 600
      tbody
        tr
          td
            border-bottom 1px solid #ccc
            padding 30px 0
            font-size 30px
            text-align center
            color #555
          .tel
            color #d41f1f
</style>
